<template>
  <view class="items_grid_list">
    <!-- 判断是否是 HTML商品 -->
    <block v-if="tabChangeData.is_customize == 1"><isTabsCustomize :isCustomizeData.sync="tabChangeData.html_content_data"></isTabsCustomize></block>

    <block v-else>
      <!-- 判断展示方式 横向或竖向滑动 -->
      <scroll-view v-if="tabChangeData.showType == 'vertical'" scroll-y="true" class="swiper-item-box">
        <view class="shopitem-vertical">
          <block v-for="(item, index) in tabsContent" :key="index">
            <!-- 单个商品展示宽度宽度 100%-->
            <view v-if="item.width == '100'" class="listing-banner">
              <view class="image_box" @click.stop="jumpPage" :data-itemId="item.itemId" :data-valueId="item.valueId" :data-valueName="item.valueName">
                <!-- 新品和线上专供 -->
                <view class="newTag" v-if="filterChecked.fliterFrontTag(item.frontTag, 'NEW')">新品</view>
                <block v-if="tabChangeData.showMajorUrl == '0' "><image mode="widthFix" :src="item.hoverUrl ? item.hoverUrl : item.majorUrl" /></block>
                <block v-else><image mode="widthFix" :src="item.majorUrl" /></block>
              </view>

              <view class="cos-goods">
                <!-- 显示促销 -->
                <view v-if="item.promotionTagList !== null && item.promotionTagList.length > 0" class="saleBox">
                  <block v-for="(promotionItem, index) in item.promotionTagList" :key="index">
                    <!-- 会员提前购 -->
                    <view v-if="promotionItem.promotionType == 'forward_purchase'">
                      <view
                        v-if="
                          filterChecked.forwardPurchaseTag(promotionItem.memberLevelIds, memberLevelId, memberIsActive) &&
                            filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)
                        "
                      >
                        <span class="goodsTag">{{ promotionItem.promotionTag + ' ' }}</span>
                      </view>
                    </view>
                    <view v-if="promotionItem.promotionType !== 'forward_purchase' && promotionItem.promotionType !== 'custom_tag'">
                      <view v-if="filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)">
                        <span class="goodsTag">{{ promotionItem.promotionTag + ' ' }}</span>
                      </view>
                    </view>
                  </block>
                </view>
                <!-- 促销 -->
                <!-- 名称和价格 -->
                <view class="cos-product_info">
                  <view class="product_name">{{ item.itemName }}</view>
                </view>
                <!-- 现价低于划线价，显示划线价  -->
                <view class="markPrice" v-if="item.markingPrice / 1 > item.price / 1">
                  <view class="linePrice">{{ '¥ ' + item.markingPrice / 1 }}</view>
                  <view class="nowPrice">{{ '¥ ' + item.price / 1 }}</view>
                </view>
                <view v-else>
                  <view class="price">{{ '¥ ' + item.price / 1 }}</view>
                </view>
                <view class="markPrice rule-price-box" v-if="item.rulesArr.length > 0">
                  <block v-for="(innerItem, innerIndex) in item.rulesArr" :key="innerIndex">
                    <view class="rule-price goodsTag">{{ innerItem.priceTag}} {{ '¥ ' + innerItem.strategyPrice}}</view>
                  </block>
                </view>
                <view class="marker-text" v-if="filterChecked.fliterFrontTag(item.frontTag, 'ONLINE EXCLUSIVE')">线上专享</view>

                <!-- 材质标签 -->
                <view class="marker-text tag2" v-if="item.frontMaterialTag">{{ item.frontMaterialTag }}</view>

                <!-- 自定义标签 -->
                <view v-if="item.customPromotionTags !== null && item.customPromotionTags.length > 0">
                  <block v-for="(promotionItem, index) in item.customPromotionTags" :key="index" class="saleBox">
                    <view v-if="promotionItem.promotionType == 'custom_tag'">
                      <view v-if="filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)">
                        <span class="customGoodsTag" :style="{ color: promotionItem.tagStyle }">{{ promotionItem.promotionTag + '   ' }}&#32;</span>
                      </view>
                    </view>
                  </block>
                </view>

                <!-- 显示色块 -->
                <view class="colorBlock" @click.stop="jumpPage" :data-itemId="item.itemId" :data-valueId="item.valueId" :data-valueName="item.valueName">
                  <view class="skuImageUrl" v-for="(item, index) in item.frontProperties" :key="index"><image :src="item.skuImageUrl" /></view>
                </view>

                <!-- 收藏 start isShowCollect == 1 显示收藏， 0不显示-->
                <!--已收藏显示实心-->
                <block v-if="tabChangeData.isShowCollect == 1">
                  <!--收藏，快速加购 开始-->
                  <view class="btnContainer">
                    <!--已收藏显示实心-->
                    <view v-if="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)">
                      <i
                        class="svg_favON"
                        :data-value="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)"
                        :data-text="item.itemId + '_' + item.valueId"
                        @click="cancelFavorite"
                      />
                    </view>
                    <view v-else>
                      <view v-if="userLogin">
                        <view v-if="favoritesList[item.itemId - item.valueId]">
                          <i
                            class="svg_favON"
                            :data-value="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)"
                            :data-text="item.itemId + '_' + item.valueId"
                            @click="cancelFavorite"
                          />
                        </view>
                        <view v-else>
                          <i
                            class="svg_favOFF"
                            @click="addFavorites(item.frontCode, item.itemId, item.valueId)"
                            :data-id="'heart_' + item.frontCode + '_' + item.itemId + '_' + item.valueId"
                          />
                        </view>
                      </view>
                      <view class="item" v-else>
                        <button
                          class="svg_favOFF"
                          open-type="getUserInfo"
                          @getuserinfo="favGotUserInfoToRegister"
                          :data-text="item.frontCode + '_' + item.itemId + '_' + item.valueId"
                        ></button>
                      </view>
                    </view>

                    <!--仅上架商品显示加购-->
                    <view v-if="item.approveStatus === 'onsale' && item.frontQty > 0">
                      <view v-if="userLogin">
                        <i
                          @click="quickPurchase(item.itemId, item.valueId)"
                          class="iconfont icon-cos_cart"
                          :data-id="'heart_' + item.frontCode + '_' + item.itemId + '_' + item.valueId"
                        />
                      </view>
                      <view v-else>
                        <button
                          class="iconfont icon-cos_cart"
                          open-type="getUserInfo"
                          @getuserinfo="addcartGotUserInfoToRegister"
                          :data-text="item.frontCode + '_' + item.itemId + '_' + item.valueId"
                        ></button>
                      </view>
                    </view>
                  </view>
                  <!--收藏，快速加购 结束-->
                </block>
                <!-- 收藏 end -->
              </view>
            </view>

            <!-- 单个商品展示宽度50% -->
            <view v-if="item.width == '50'" class="list">
              <view class="image_box" @click.stop="jumpPage" :data-itemId="item.itemId" :data-valueId="item.valueId" :data-valueName="item.valueName">
                <!-- 新品和线上专供 -->
                <view class="newTag" v-if="filterChecked.fliterFrontTag(item.frontTag, 'NEW')">新品</view>
                <block v-if="tabChangeData.showMajorUrl == '0' "><image mode="widthFix" :src="item.hoverUrl ? item.hoverUrl : item.majorUrl" /></block>
                <block v-else><image mode="widthFix" :src="item.majorUrl" /></block>
              </view>

              <view class="cos-goods">
                <!-- 显示促销 -->
                <view v-if="item.promotionTagList !== null && item.promotionTagList.length > 0" class="saleBox">
                  <block v-for="(promotionItem, index) in item.promotionTagList" :key="index">
                    <!-- 会员提前购 -->
                    <view v-if="promotionItem.promotionType == 'forward_purchase'">
                      <view
                        v-if="
                          filterChecked.forwardPurchaseTag(promotionItem.memberLevelIds, memberLevelId, memberIsActive) &&
                            filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)
                        "
                      >
                        <span class="goodsTag">{{ promotionItem.promotionTag + ' ' }}</span>
                      </view>
                    </view>
                    <view v-if="promotionItem.promotionType !== 'forward_purchase' && promotionItem.promotionType !== 'custom_tag'">
                      <view v-if="filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)">
                        <span class="goodsTag">{{ promotionItem.promotionTag + ' ' }}</span>
                      </view>
                    </view>
                  </block>
                </view>
                <!-- 促销 -->
                <!-- 名称和价格 -->
                <view class="cos-product_info">
                  <view class="product_name">{{ item.itemName }}</view>
                </view>
                <!-- 现价低于划线价，显示划线价  -->
                <view class="markPrice" v-if="item.markingPrice / 1 > item.price / 1">
                  <view class="linePrice">{{ '¥ ' + item.markingPrice / 1 }}</view>
                  <view class="nowPrice">{{ '¥ ' + item.price / 1 }}</view>
                </view>
                <view v-else>
                  <view class="price">{{ '¥ ' + item.price / 1 }}</view>
                </view>
                <view class="markPrice rule-price-box" v-if="item.rulesArr.length > 0">
                  <block v-for="(innerItem, innerIndex) in item.rulesArr" :key="innerIndex">
                    <view class="rule-price goodsTag">{{ innerItem.priceTag}} {{ '¥ ' + innerItem.strategyPrice}}</view>
                  </block>
                </view>
                <view class="marker-text" v-if="filterChecked.fliterFrontTag(item.frontTag, 'ONLINE EXCLUSIVE')">线上专享</view>

                <!-- 材质标签 -->
                <view class="marker-text tag2" v-if="item.frontMaterialTag">{{ item.frontMaterialTag }}</view>

                <!-- 自定义标签 -->
                <view v-if="item.customPromotionTags !== null && item.customPromotionTags.length > 0">
                  <block v-for="(customPromotionItem, index) in item.customPromotionTags" :key="index" class="saleBox">
                    <view v-if="customPromotionItem.promotionType == 'custom_tag'">
                      <view v-if="filterChecked.filterCustomerGroupPromotionTag(customPromotionItem.groupIds, groupId)">
                        <span class="customGoodsTag" :style="{ color: customPromotionItem.tagStyle }">{{ customPromotionItem.promotionTag + '   ' }}&#32;</span>
                      </view>
                    </view>
                  </block>
                </view>

                <!-- 显示色块 -->
                <view class="colorBlock" @click.stop="jumpPage" :data-itemId="item.itemId" :data-valueId="item.valueId" :data-valueName="item.valueName">
                  <view class="skuImageUrl" v-for="(item, index) in item.frontProperties" :key="index"><image :src="item.skuImageUrl" /></view>
                </view>

                <!-- 收藏 start isShowCollect == 1 显示收藏， 0不显示-->
                <!--已收藏显示实心-->
                <block v-if="tabChangeData.isShowCollect == 1">
                  <!--收藏，快速加购 开始-->
                  <view class="btnContainer">
                    <!--已收藏显示实心-->
                    <view v-if="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)">
                      <i
                        class="svg_favON"
                        :data-value="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)"
                        :data-text="item.itemId + '_' + item.valueId"
                        @click="cancelFavorite"
                      />
                    </view>
                    <view v-else>
                      <view v-if="userLogin">
                        <view v-if="favoritesList[item.itemId - item.valueId]">
                          <i
                            class="svg_favON"
                            :data-value="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)"
                            :data-text="item.itemId + '_' + item.valueId"
                            @click="cancelFavorite"
                          />
                        </view>
                        <view v-else>
                          <i
                            class="svg_favOFF"
                            @click="addFavorites(item.frontCode, item.itemId, item.valueId)"
                            :data-id="'heart_' + item.frontCode + '_' + item.itemId + '_' + item.valueId"
                          />
                        </view>
                      </view>
                      <view class="item" v-else>
                        <button
                          class="svg_favOFF"
                          open-type="getUserInfo"
                          @getuserinfo="favGotUserInfoToRegister"
                          :data-text="item.frontCode + '_' + item.itemId + '_' + item.valueId"
                        ></button>
                      </view>
                    </view>

                    <!--仅上架商品显示加购-->
                    <view v-if="item.approveStatus === 'onsale' && item.frontQty > 0">
                      <view v-if="userLogin">
                        <i
                          @click="quickPurchase(item.itemId, item.valueId)"
                          class="iconfont icon-cos_cart"
                          :data-id="'heart_' + item.frontCode + '_' + item.itemId + '_' + item.valueId"
                        />
                      </view>
                      <view v-else>
                        <button
                          class="iconfont icon-cos_cart"
                          open-type="getUserInfo"
                          @getuserinfo="addcartGotUserInfoToRegister"
                          :data-text="item.frontCode + '_' + item.itemId + '_' + item.valueId"
                        ></button>
                      </view>
                    </view>
                  </view>
                  <!--收藏，快速加购 结束-->
                </block>
                <!-- 收藏 end -->
              </view>
            </view>
            <!-- 单个商品展示宽度 50% End -->
          </block>
        </view>
      </scroll-view>
      <!-- 上下滑动 End -->

      <!-- 左右滑动 start -->
      <scroll-view v-if="tabChangeData.showType == 'horizontal'" scroll-x="true" class="swiper-item-box">
        <view class="shopitem-horizontal">
          <block v-for="(item, index) in tabsContent" :key="index">
            <!-- 单个商品展示宽度宽度 100%-->
            <view v-if="item.width == '100'" class="listing-banner">
              <view class="image_box" @click.stop="jumpPage" :data-itemId="item.itemId" :data-valueId="item.valueId" :data-valueName="item.valueName">
                <!-- 新品和线上专供 -->
                <view class="newTag" v-if="filterChecked.fliterFrontTag(item.frontTag, 'NEW')">新品</view>
                <block v-if="tabChangeData.showMajorUrl == '0' "><image mode="widthFix" :src="item.hoverUrl ? item.hoverUrl : item.majorUrl" /></block>
                <block v-else><image mode="widthFix" :src="item.majorUrl" /></block>
              </view>

              <view class="cos-goods">
                <!-- 显示促销 -->
                <view v-if="item.promotionTagList !== null && item.promotionTagList.length > 0" class="saleBox">
                  <block v-for="(promotionItem, index) in item.promotionTagList" :key="index">
                    <!-- 会员提前购 -->
                    <view v-if="promotionItem.promotionType == 'forward_purchase'">
                      <view
                        v-if="
                          filterChecked.forwardPurchaseTag(promotionItem.memberLevelIds, memberLevelId, memberIsActive) &&
                            filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)
                        "
                      >
                        <span class="goodsTag">{{ promotionItem.promotionTag + ' ' }}</span>
                      </view>
                    </view>
                    <view v-if="promotionItem.promotionType !== 'forward_purchase' && promotionItem.promotionType !== 'custom_tag'">
                      <view v-if="filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)">
                        <span class="goodsTag">{{ promotionItem.promotionTag + ' ' }}</span>
                      </view>
                    </view>
                  </block>
                </view>
                <!-- 促销 -->
                <!-- 名称和价格 -->
                <view class="cos-product_info">
                  <view class="product_name">{{ item.itemName }}</view>
                  <!-- 现价低于划线价，显示划线价  -->
                </view>
                <!-- 现价低于划线价，显示划线价  -->
                <view class="markPrice" v-if="item.markingPrice / 1 > item.price / 1">
                  <view class="linePrice">{{ '¥ ' + item.markingPrice / 1 }}</view>
                  <view class="nowPrice">{{ '¥ ' + item.price / 1 }}</view>
                </view>
                <view v-else>
                  <view class="price">{{ '¥ ' + item.price / 1 }}</view>
                </view>
                <view class="markPrice rule-price-box" v-if="item.rulesArr.length > 0">
                  <block v-for="(innerItem, innerIndex) in item.rulesArr" :key="innerIndex">
                    <view class="rule-price goodsTag">{{ innerItem.priceTag}} {{ '¥ ' + innerItem.strategyPrice}}</view>
                  </block>
                </view>
                <view class="marker-text" v-if="filterChecked.fliterFrontTag(item.frontTag, 'ONLINE EXCLUSIVE')">线上专享</view>

                <!-- 材质标签 -->
                <view class="marker-text tag2" v-if="item.frontMaterialTag">{{ item.frontMaterialTag }}</view>
                <!-- 自定义标签 -->
                <view v-if="item.customPromotionTags !== null && item.customPromotionTags.length > 0">
                  <block v-for="(promotionItem, index) in item.customPromotionTags" :key="index" class="saleBox">
                    <view v-if="promotionItem.promotionType == 'custom_tag'">
                      <view v-if="filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)">
                        <span class="customGoodsTag" :style="{ color: promotionItem.tagStyle }">{{ promotionItem.promotionTag + '   ' }}&#32;</span>
                      </view>
                    </view>
                  </block>
                </view>
                <!-- 显示色块 -->
                <view class="colorBlock" @click.stop="jumpPage" :data-itemId="item.itemId" :data-valueId="item.valueId" :data-valueName="item.valueName">
                  <view class="skuImageUrl" v-for="(item, index) in item.frontProperties" :key="index"><image :src="item.skuImageUrl" /></view>
                </view>

                <!-- 收藏 start isShowCollect == 1 显示收藏， 0不显示-->
                <!--已收藏显示实心-->
                <block v-if="tabChangeData.isShowCollect == 1">
                  <!--收藏，快速加购 开始-->
                  <view class="btnContainer">
                    <!--已收藏显示实心-->
                    <view v-if="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)">
                      <i
                        class="svg_favON"
                        :data-value="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)"
                        :data-text="item.itemId + '_' + item.valueId"
                        @click="cancelFavorite"
                      />
                    </view>
                    <view v-else>
                      <view v-if="userLogin">
                        <view v-if="favoritesList[item.itemId - item.valueId]">
                          <i
                            class="svg_favON"
                            :data-value="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)"
                            :data-text="item.itemId + '_' + item.valueId"
                            @click="cancelFavorite"
                          />
                        </view>
                        <view v-else>
                          <i
                            class="svg_favOFF"
                            @click="addFavorites(item.frontCode, item.itemId, item.valueId)"
                            :data-id="'heart_' + item.frontCode + '_' + item.itemId + '_' + item.valueId"
                          />
                        </view>
                      </view>
                      <view class="item" v-else>
                        <button
                          class="svg_favOFF"
                          open-type="getUserInfo"
                          @getuserinfo="favGotUserInfoToRegister"
                          :data-text="item.frontCode + '_' + item.itemId + '_' + item.valueId"
                        ></button>
                      </view>
                    </view>

                    <!--仅上架商品显示加购-->
                    <view v-if="item.approveStatus === 'onsale' && item.frontQty > 0">
                      <view v-if="userLogin">
                        <i
                          @click="quickPurchase(item.itemId, item.valueId)"
                          class="iconfont icon-cos_cart"
                          :data-id="'heart_' + item.frontCode + '_' + item.itemId + '_' + item.valueId"
                        />
                      </view>
                      <view v-else>
                        <button
                          class="iconfont icon-cos_cart"
                          open-type="getUserInfo"
                          @getuserinfo="addcartGotUserInfoToRegister"
                          :data-text="item.frontCode + '_' + item.itemId + '_' + item.valueId"
                        ></button>
                      </view>
                    </view>
                  </view>
                  <!--收藏，快速加购 结束-->
                </block>
                <!-- 收藏 end -->
              </view>
            </view>

            <!-- 单个商品展示宽度50% -->
            <view v-if="item.width == '50'" class="list">
              <view class="image_box" @click.stop="jumpPage" :data-itemId="item.itemId" :data-valueId="item.valueId" :data-valueName="item.valueName">
                <!-- 新品和线上专供 -->
                <view class="newTag" v-if="filterChecked.fliterFrontTag(item.frontTag, 'NEW')">新品</view>
                <block v-if="tabChangeData.showMajorUrl == '0' "><image mode="widthFix" :src="item.hoverUrl ? item.hoverUrl : item.majorUrl" /></block>
                <block v-else><image mode="widthFix" :src="item.majorUrl" /></block>
              </view>

              <view class="cos-goods">
                <!-- 显示促销 -->
                <view v-if="item.promotionTagList !== null && item.promotionTagList.length > 0" class="saleBox">
                  <block v-for="(promotionItem, index) in item.promotionTagList" :key="index">
                    <!-- 会员提前购 -->
                    <view v-if="promotionItem.promotionType == 'forward_purchase'">
                      <view
                        v-if="
                          filterChecked.forwardPurchaseTag(promotionItem.memberLevelIds, memberLevelId, memberIsActive) &&
                            filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)
                        "
                      >
                        <span class="goodsTag">{{ promotionItem.promotionTag + ' ' }}</span>
                      </view>
                    </view>
                    <view v-if="promotionItem.promotionType !== 'forward_purchase' && promotionItem.promotionType !== 'custom_tag'">
                      <view v-if="filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)">
                        <span class="goodsTag">{{ promotionItem.promotionTag + ' ' }}</span>
                      </view>
                    </view>
                  </block>
                </view>
                <!-- 促销 -->
                <!-- 名称和价格 -->
                <view class="cos-product_info">
                  <view class="product_name">{{ item.itemName }}</view>
                  <!-- 现价低于划线价，显示划线价  -->
                </view>
                <!-- 现价低于划线价，显示划线价  -->
                <view class="markPrice" v-if="item.markingPrice / 1 > item.price / 1">
                  <view class="linePrice">{{ '¥ ' + item.markingPrice / 1 }}</view>
                  <view class="nowPrice">{{ '¥ ' + item.price / 1 }}</view>
                </view>
                <view v-else>
                  <view class="price">{{ '¥ ' + item.price / 1 }}</view>
                </view>
                <view class="markPrice rule-price-box" v-if="item.rulesArr.length > 0">
                  <block v-for="(innerItem, innerIndex) in item.rulesArr" :key="innerIndex">
                    <view class="rule-price goodsTag">{{ innerItem.priceTag}} {{ '¥ ' + innerItem.strategyPrice}}</view>
                  </block>
                </view>
                <view class="marker-text" v-if="filterChecked.fliterFrontTag(item.frontTag, 'ONLINE EXCLUSIVE')">线上专享</view>

                <!-- 材质标签 -->
                <view class="marker-text tag2" v-if="item.frontMaterialTag">{{ item.frontMaterialTag }}</view>

                <!-- 自定义标签 -->
                <view v-if="item.customPromotionTags !== null && item.customPromotionTags.length > 0">
                  <block v-for="(customPromotionItem, index) in item.customPromotionTags" :key="index" class="saleBox">
                    <view v-if="customPromotionItem.promotionType == 'custom_tag'">
                      <view v-if="filterChecked.filterCustomerGroupPromotionTag(customPromotionItem.groupIds, groupId)">
                        <span class="customGoodsTag" :style="{ color: customPromotionItem.tagStyle }">{{ customPromotionItem.promotionTag + '   ' }}&#32;</span>
                      </view>
                    </view>
                  </block>
                </view>
                <!-- 显示色块 -->
                <view class="colorBlock" @click.stop="jumpPage" :data-itemId="item.itemId" :data-valueId="item.valueId" :data-valueName="item.valueName">
                  <view class="skuImageUrl" v-for="(item, index) in item.frontProperties" :key="index"><image :src="item.skuImageUrl" /></view>
                </view>

                <!-- 收藏 start isShowCollect == 1 显示收藏， 0不显示-->
                <!--已收藏显示实心-->
                <block v-if="tabChangeData.isShowCollect == 1">
                  444
                  <!--收藏，快速加购 开始-->
                  <view class="btnContainer">
                    <!--已收藏显示实心-->
                    <view v-if="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)">
                      <i
                        class="svg_favON"
                        :data-value="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)"
                        :data-text="item.itemId + '_' + item.valueId"
                        @click="cancelFavorite"
                      />
                    </view>
                    <view v-else>
                      <view v-if="userLogin">
                        <view v-if="favoritesList[item.itemId - item.valueId]">
                          <i
                            class="svg_favON"
                            :data-value="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)"
                            :data-text="item.itemId + '_' + item.valueId"
                            @click="cancelFavorite"
                          />
                        </view>
                        <view v-else>
                          <i
                            class="svg_favOFF"
                            @click="addFavorites(item.frontCode, item.itemId, item.valueId)"
                            :data-id="'heart_' + item.frontCode + '_' + item.itemId + '_' + item.valueId"
                          />
                        </view>
                      </view>
                      <view class="item" v-else>
                        <button
                          class="svg_favOFF"
                          open-type="getUserInfo"
                          @getuserinfo="favGotUserInfoToRegister"
                          :data-text="item.frontCode + '_' + item.itemId + '_' + item.valueId"
                        ></button>
                      </view>
                    </view>

                    <!--仅上架商品显示加购-->
                    <view v-if="item.approveStatus === 'onsale' && item.frontQty > 0">
                      <view v-if="userLogin">
                        <i
                          @click="quickPurchase(item.itemId, item.valueId)"
                          class="iconfont icon-cos_cart"
                          :data-id="'heart_' + item.frontCode + '_' + item.itemId + '_' + item.valueId"
                        />
                      </view>
                      <view v-else>
                        <button
                          class="iconfont icon-cos_cart"
                          open-type="getUserInfo"
                          @getuserinfo="addcartGotUserInfoToRegister"
                          :data-text="item.frontCode + '_' + item.itemId + '_' + item.valueId"
                        ></button>
                      </view>
                    </view>
                  </view>
                  <!--收藏，快速加购 结束-->
                </block>
                <!-- 收藏 end -->
              </view>
            </view>
            <!-- 单个商品展示宽度 50% End -->
          </block>
        </view>
      </scroll-view>
    </block>

    <!--尺码选择器 开始-->
    <view v-if="showSizeList" class="topSizeList">
      <view class="bg" catchtouchmove="preventTouchMove"></view>
      <view class="sizeBox">
        <view class="cascade_header">
          <text class="quxiao" @click="cancelPicker">取消</text>
          <text class="queren" @click="onSizePick">确认</text>
        </view>
        <picker-view :value="defaultValue" indicator-style="height: 50px;" style="width: 100%; height: 300px;background-color: #fff;" @change="bindChange">
          <picker-view-column>
            <view>选择尺码</view>
            <view v-for="(item, index) in colorSizeList" :key="index">
              {{ item.skuProperties[1].valueName }}
              <text v-if="item.qty < 1">已售罄</text>
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
    <!--尺码选择器 结束-->

    <!--加购成功商品提示框开始-->
    <view v-if="addCartSuccess" class="topBox">
      <view class="iconfont icon-cuowu1" @click="closeMiniCart"></view>
      <view class="gContent">
        <view class="gImg"><image :src="skuImageUrl"></image></view>
        <view class="gInfo">
          <view class="gNmae">{{ itemName }}</view>
          <view>
            <view class="markPrice" v-if="markingPrice / 1 > price / 1">
              <view class="linePrice">{{ '¥ ' + markingPrice / 1 }}</view>
              <view class="nowPrice">{{ '¥ ' + price / 1 }}</view>
            </view>
            <view v-else>
              <view class="price">{{ '¥ ' + price / 1 }}</view>
            </view>
          </view>
          <view class="gColor">颜色 {{ colorName }}</view>
          <view>尺码 {{ sizeName }}</view>
        </view>
      </view>
      <view class="iconfont icon-bag-o" @click="goShoppingCart">成功加入购物车</view>
    </view>
    <!--加购成功商品提示框结束-->
  </view>
</template>
<script module="filterChecked" lang="wxs" src="../../../utils/filter.wxs"></script>
<script>
import Vue from 'vue';
import api from '@/api/api';
import tip from '@/utils/tip';
import util from '@/utils/util';
import customize from '@/utils/customize';
import { CART_KEY, USER_INFO, SYSTEM_INFO, MERCHANT_INFO, CUSTOMER_INFO, USER_SPECICAL_INFO, SEL_CLASS_CODE, SEL_ACTIVE_CODE } from '@/utils/constant';
import isTabsCustomize from './isTabsCustomize';
export default {
  name: 'wxParseTemplate1tabType',
  components: {
    isTabsCustomize
  },
  props: {
    tabChangeData: Object,
    userLogin: Boolean,
    favoriteItemIds: {
      type: Array,
      twoWay: true
    },

    addfavorites: String
  },

  data() {
    return {
      isCustomizeData: {},
      purchasetype: 1,
      special: 0,
      itemShowType: 'vertical',
      isValid: 1, //默认不显示0库存
      groupId: -1,

      tabsContent: [],

      frontCode: '',
      itemId: '',
      valueId: '',

      favoritesList: [],
      // favoriteItemIds:[],
      childFavoriteItemIds: [],
      collectedItems: [],

      addCartSuccess: false,

      // 快速加购
      colorName: '',
      sizeName: '',
      skuImageUrl: '',
      productList: {},
      markingPrice: 0,
      price: 0,
      valueId: 0,
      detail: {},
      itemName: '',
      itemCode: '',

      colorSizeList: [],
      defaultValue: [0],
      showSizeList: false,
      addCartItemCode: '',
      addCartSkuCode: '',
      addCartSkuId: '',
      addCartQty: 1,
      cartKey: '',

      clickAttrArr: [], // 未登录状态点击收藏按钮
      clickType: ''
    };
  },

  created: function(option) {
    let that = this;
    let merchantInfo = uni.getStorageSync(MERCHANT_INFO)
    if (this.tabChangeData.is_customize == 0) {
      this.getItemsListTab(this.tabChangeData, merchantInfo);
    }

    if (this.userLogin) {
      that.childFavoriteItemIds = that.favoriteItemIds;
      let clickType = uni.getStorageSync('clickType') || '';
      if (clickType) {
        if (clickType.type == 'favorite') {
          that.appendFavorites(clickType.attrArr[0], clickType.attrArr[1], attrArr[2]);
        } else if (clickType.type == 'addCart') {
          that.quickPurchase(clickType.attrArr[1], clickType.attrArr[2]);
        }
        uni.removeStorageSync('clickType');
      }
    } else {
      uni.removeStorageSync('clickType');
    }
  },

  mounted() {},

  watch: {
    addfavorites: function(newVal, oldVal) {
      let that = this;
      this.addfavorites = newVal;
      // 查询商品是否已收藏,没有则调收藏接口
      this.inquireFavorites(that.itemId, that.valueId);
    },

    favoriteItemIds: function(newVal, oldVal) {
      let that = this;
      that.childFavoriteItemIds = newVal;
    }
  },

  methods: {
    // 根据cid 或者 商品编码 获取商品列表 items_change
    getItemsListTab: async function(tabsData, merchantInfo) {
      // 获取商品列表
      if (!merchantInfo) {
        return;
      }
      let that = this;
      let cid = '';
      let inputItems = '';
      if (tabsData.cid && tabsData.type == 'category') {
        cid = tabsData.cid;
      } else if (tabsData.type == 'goods') {
        inputItems = tabsData.inputItems;
      }

      if (!cid && !inputItems) {
        return;
      }
      var tabsDataJson = [];
      tabsDataJson = tabsData;
      let after = that.currentPage == 1 ? '' : that.afterPage
      let pageSize = tabsData.count || 12
      that.$commonFunction.doSearchGoods(cid, '', 1, pageSize, '', inputItems, '', '', '', '', '').then((res) => {
        var itemsListArr = res.data;
        itemsListArr.showType = tabsData.showType ? tabsData.showType : 'vertical';
        itemsListArr.showNoStock = tabsData.showNoStock;  //是否显示0库存
        itemsListArr.width = tabsData.width;              //宽度
        itemsListArr.showItemName = tabsData.showItemName ? tabsData.showItemName : "1"; //是否显示名称
        itemsListArr.showItemBlock = tabsData.showItemBlock ? tabsData.showItemBlock : "1"; //是否显示色块
        itemsListArr.showItemPrice = tabsData.showItemPrice ? tabsData.showItemPrice : "1"; //是否显示价格
        itemsListArr.showMajorUrl = tabsData.showMajorUrl ?  tabsData.showMajorUrl : "1"; //显示主图还是副图
        itemsListArr.cid = tabsData.cid || 0;
        var itemsList = itemsListArr.content;
        // 策略价格
        var s_item = [];
        for (var i in itemsList) {
          s_item = itemsList[i];
        
          s_item.width = tabsData.width;
          var strategyIdArr = [];
          for (var j in s_item['strategies']) {
            var s_strategy = s_item['strategies'][j];
            if (
              s_strategy['strategyStartTime'] != '' &&
              s_strategy['strategyStartTime'] != '' &&
              s_strategy['strategyEndTime'] != null &&
              s_strategy['strategyEndTime'] != null &&
              s_strategy['strategyPrice'] != null &&
              s_strategy['strategyPrice'] != '' &&
              Number(s_strategy['strategyPrice']) > 0
            ) {
              var endTimestamp = Date.parse(s_strategy['strategyEndTime'].replace(/-/g, '/')); // 为了兼容IOS，需先将字符串转换为'2018/9/11 9:11:23' 返回'2018-9-12 9:11:23'的时间戳
              var startTimestamp = Date.parse(s_strategy['strategyStartTime'].replace(/-/g, '/'));
              var timestamp = new Date().getTime();
              if (timestamp >= startTimestamp && timestamp < endTimestamp) {
                strategyIdArr.push(s_strategy);
              } else {
              }
            }
          }
          if (strategyIdArr != '') {
            s_item['price'] = strategyIdArr[0].strategyPrice;
          }
        
          var customPromotionTags = [];
          for (var t in s_item['promotionTagList']) {
            var tagItem = s_item['promotionTagList'][t];
            if (tagItem.promotionType == 'custom_tag') {
              customPromotionTags.push(tagItem);
            }
          }
        
          let tempTagList = customPromotionTags.slice();
          tempTagList.sort((a, b) => {
            return a.sortOrder - b.sortOrder;
          });
        
          itemsList[i]['customPromotionTags'] = tempTagList;
        }
        
        if (tabsData.isBig == 1) {
          itemsList[0].width = '100';
        }
        
        this.tabsContent = itemsListArr;
      }).catch((err) => {
        tip.plainText(err.data.msg)
      })
      // const json = await api.getGoodsList({
      //   query: {
      //     q: inputItems,
      //     class_id: cid || '',
      //     page_no: 1,
      //     page_size: tabsData.count || 12,
      //     merchant_id: merchantInfo.cloudMerchantId,
      //     store_id: merchantInfo.cloudMerchantStoreId
      //   }
      // });
      // if (json.code === 1000) {
      //   var categoryListArr = json.data;
      //   this.tabsContent = categoryListArr.content;
      //   // 策略价格
      //   var s_item = [];
      //   var tabsContent = [];
      //   for (var i in this.tabsContent) {
      //     s_item = this.tabsContent[i];
      //     s_item.width = tabsData.width;
      //     var strategyIdArr = [];
      //     for (var j in s_item['strategies']) {
      //       var s_strategy = s_item['strategies'][j];
      //       if (
      //         s_strategy['strategyStartTime'] != '' &&
      //         s_strategy['strategyStartTime'] != '' &&
      //         s_strategy['strategyEndTime'] != null &&
      //         s_strategy['strategyEndTime'] != null &&
      //         s_strategy['strategyPrice'] != null &&
      //         s_strategy['strategyPrice'] != '' &&
      //         Number(s_strategy['strategyPrice']) > 0
      //       ) {
      //         var endTimestamp = Date.parse(s_strategy['strategyEndTime'].replace(/-/g, '/')); // 为了兼容IOS，需先将字符串转换为'2018/9/11 9:11:23' 返回'2018-9-12 9:11:23'的时间戳
      //         var startTimestamp = Date.parse(s_strategy['strategyStartTime'].replace(/-/g, '/'));
      //         var timestamp = new Date().getTime();
      //         if (timestamp >= startTimestamp && timestamp < endTimestamp) {
      //           strategyIdArr.push(s_strategy);
      //         } else {
      //         }
      //       }
      //     }
      //     if (strategyIdArr != '') {
      //       s_item['price'] = strategyIdArr[0].strategyPrice;
      //     }

      //     var customPromotionTags = [];
      //     for (var t in s_item['promotionTagList']) {
      //       var tagItem = s_item['promotionTagList'][t];
      //       if (tagItem.promotionType == 'custom_tag') {
      //         customPromotionTags.push(tagItem);
      //       }
      //     }

      //     let tempTagList = customPromotionTags.slice();
      //     tempTagList.sort((a, b) => {
      //       return a.sortOrder - b.sortOrder;
      //     });

      //     this.tabsContent[i]['customPromotionTags'] = tempTagList;
      //   }

      //   if (tabsDataJson.isBig == 1) {
      //     tabsContent = this.tabsContent[0];
      //     tabsContent.width = '100';
      //   }


      // } else {
      //   tip.plainText(json.data.msg);
      // }
    },

    addFavorites(frontCode, itemId, valueId) {
      let that = this;
      that.appendFavorites(frontCode, itemId, valueId);
    },

    // 取消收藏
    cancelFavorite(e) {
      let that = this;
      let favoriteId = e.currentTarget.dataset.value;
      let textArr = e.currentTarget.dataset.text;
      let itemArr = textArr.split('_');

      that.favoritesList[itemArr[0] - itemArr[1]] = '';
      that.delFavorite(favoriteId);
    },

    /**
     * @param {Object} e
     * 点击加入购物车授权
     */
    addcartGotUserInfoToRegister(e) {
      let that = this;
      that.clickType = 'addCart';
      that.onGotUserInfoToRegister(e);
    },

    /**
     * 授权 点击收藏
     * @param e
     */
    favGotUserInfoToRegister(e) {
      let that = this;
      that.clickType = 'addCart';
      that.onGotUserInfoToRegister(e);
    },

    /**
     * 快速购买
     */
    quickPurchase(itemId, valueId) {
      let that = this;
      that.valueId = valueId;
      that.getGoodsDetail(itemId);
    },

    //取消按钮
    cancelPicker() {
      //这里也是动画，然其高度变为0
      this.hidePicker();
    },
    //确认按钮
    onSizePick() {
      let that = this;
      //一样是动画，级联选择页消失，效果和取消一样
      that.hidePicker();
      that.addShoppingCart();
    },

    //滚动选择的时候触发事件
    bindChange(e) {
      //这里是获取picker-view内的picker-view-column 当前选择的是第几项
      let that = this;
      let e_value = e.detail.value;
      that.addCartItemCode = that.colorSizeList[e_value - 1].barcode;
      that.addCartSkuCode = that.colorSizeList[e_value - 1].skuCode;
      that.addCartSkuId = that.colorSizeList[e_value - 1].skuId;
      that.sizeName = that.colorSizeList[e_value - 1].skuProperties[1].valueName;
    },

    // 关闭
    closeMiniCart() {
      let that = this;
      that.addCartSuccess = false;
    },

    // 跳转到购物车页
    goShoppingCart() {
      let that = this;
      uni.navigateTo({
        url: '/pages/shopCart'
      });
    },

    /**
     * 获取用户收藏列表
     */
    getFavoriteList: async function() {
      let that = this;
      that.favoriteItemIds = [];
      if (uni.getStorageSync(CUSTOMER_INFO).customerId) {
        let jwt = uni.getStorageSync(CUSTOMER_INFO).jwt;
        //获取商户信息
        let merchantInfo = uni.getStorageSync(MERCHANT_INFO);
        const memberFavoriteList = await api.getFavoritesItems({
          method: 'GET',
          header: { jwt: jwt },
          query: {
            merchant_id: merchantInfo.cloudMerchantId,
            page_no: 1,
            page_size: 20,
            store_id: merchantInfo.cloudMerchantStoreId
          }
        });

        if (memberFavoriteList.code === 1000 && memberFavoriteList.data.content.length > 0) {
          that.collectedItems = memberFavoriteList.data.content;
          that.collectedItems.forEach(item => {
            let tempFavorite = { itemId: item.itemId, valueId: item.valueId, favotite: item.favoritesId };
            that.favoriteItemIds.push(tempFavorite);
          });
        }
      }
    },

    // 新增商品收藏信息
    appendFavorites: async function(frontCode, itemId, valueId) {
      let that = this;
      that.favoritesList[itemId - valueId] = itemId;
      let jwt = uni.getStorageSync(CUSTOMER_INFO).jwt;
      //获取商户信息
      let merchantInfo = uni.getStorageSync(MERCHANT_INFO);
      if (jwt && merchantInfo) {
        const appendfavorite = await api.appendFavorites({
          method: 'POST',
          header: {
            jwt: jwt
          },
          query: {
            frontCode: frontCode,
            itemId: itemId,
            merchantId: merchantInfo.cloudMerchantId,
            storeId: merchantInfo.cloudMerchantStoreId,
            valueId: valueId
          }
        });
        if (appendfavorite.code == 1000) {
          this.$emit('pGetFavoriteList');
        } else {
          // tip.plainText('收藏失败');
        }
      }
    },

    // 删除商品收藏信息
    delFavorite: async function(favorites_id) {
      let that = this;
      let jwt = uni.getStorageSync(CUSTOMER_INFO).jwt;
      const delfavorite = await api.delFavorites(
        {
          method: 'PUT',
          header: {
            jwt: jwt
          }
        },
        favorites_id
      );
      if (delfavorite.code == 1000) {
        this.$emit('pGetFavoriteList');
      } else {
      }
    },

    onGotUserInfoToRegister: async function(e) {
      let that = this;
	  let merchantInfo = uni.getStorageSync(MERCHANT_INFO) || getApp().globalData.merchantInfo
	  const accountInfo = uni.getAccountInfoSync()

      try {
        if (e.detail.errMsg === 'getUserInfo:ok') {
          let productAttr = e.currentTarget.dataset.text; //0753256001_19034_41
          let attrArr = productAttr.split('_');
          that.clickAttrArr = productAttr.split('_');

          this.getMyBackground(uni.getStorageSync('merchantInfo').cloudMerchantId, uni.getStorageSync('merchantInfo').cloudMerchantStoreId);
          let res = await uni.login();

          uni.setStorageSync(USER_INFO, e.detail.userInfo);
          if (res[1].code) {
            let systemInfo = uni.getSystemInfoSync();
            uni.setStorageSync(SYSTEM_INFO, systemInfo);
            const rlt = await api.obtainUserOpenid({
              query: {
                app_id: accountInfo.miniProgram.appId,
                js_code: res[1].code
              }
            });
            if (rlt.code === 1000) {
              if (rlt.data.openid) {
                uni.setStorageSync(USER_SPECICAL_INFO, rlt.data);

                //获取商户信息
                let merchantInfo = uni.getStorageSync(MERCHANT_INFO);
                if (merchantInfo.cloudMerchantId) {
                  //验证是否绑定已经存在用户
                  let customerInfo = await api.checkUser({
                    method: 'POST',
                    query: {
                      appId: accountInfo.miniProgram.appId,
                      merchantId: merchantInfo.cloudMerchantId,
                      openId: rlt.data.openid,
                      loginToken: rlt.data.loginToken || ''
                    }
                  });
                  // 没有注册
                  if (customerInfo.code !== 1000) {
                    uni.navigateTo({
                      url: '/pages/customer/register'
                    });

                    let clickType = {
                      type: that.clickType,
                      attrArr: that.clickAttrArr
                    };
                    uni.setStorageSync('clickType', clickType);
                  } else {
					  uni.setStorageSync(CUSTOMER_INFO, customerInfo.data);
                    getApp().globalData.customerInfo = customerInfo.data;
                    this.$emit('loginStatus', true);
                    this.$emit('favoriteHandle', true);

                    if (that.clickType == 'favorite') {
                      that.appendFavorites(attrArr[0], attrArr[1], attrArr[2]);
                    } else if (that.clickType == 'addCart') {
                      that.quickPurchase(attrArr[1], attrArr[2]);
                    }
                  }
                }
              }
            } else {
              let res = await uni.showModal({
                title: 'appid有误',
                content: '授权失败'
              });
            }
          }
        } else {
          tip.plainText('您可以再次授权');
        }
      } catch (err) {
    
      }
    },

    // 商品详情信息
    getGoodsDetail: async function(goodsId) {
      let that = this;
      that.addCartSuccess = false;
      let merchantInfo = uni.getStorageSync(MERCHANT_INFO);
	  if (!goodsId) {
	    uni.redirectTo({
	      url: '/pages/util/pageNotFound'
	    });
	    return false
	  }
      const json = await api.goodsDetail(
        {
          query: {
            merchant_id: merchantInfo.cloudMerchantId,
            store_id: merchantInfo.cloudMerchantStoreId
          }
        },
        goodsId
      );

      if (json.code === 1000) {
        let data = json.data;
        that.itemName = data.itemName;
        that.itemCode = data.itemCode;
        that.price = data.price;

        let valueArr = [];
        for (let z = 0; z < data.skus.length; z++) {
          if (valueArr.indexOf(data.skus[z].skuProperties[0].valueId) == -1) {
            valueArr.push(data.skus[z].skuProperties[0].valueId);
          }
        }

        // detail  商品详情信息
        that.detail = data;
        //  isFront 1-- 颜色 0-- 尺码
        // 库存不为0的数据  qtyNotZero
        const skus = data.skus;
        for (var i = 0; i < skus.length; i++) {
          if (skus[i].skuProperties[0].valueId == parseInt(this.valueId)) {
            that.colorName = skus[i].skuProperties[0].valueName;
            that.markingPrice = skus[i].markingPrice;
            that.skuImageUrl = skus[i].skuImageUrl;
          }

          let skuProperties = skus[i].skuProperties;
          let tmpKey = '';
          let tmpFront = '';
          let flag = skus[i].qty;
          // 过滤掉0库存,对有库存的遍历
          for (var j = 0; j < skuProperties.length; j++) {
            tmpKey += skuProperties[j].valueName;
          }
          this.productList[tmpKey] = skus[i];
        }

        let tempAttribute = this.productList;
        let tempSizeList = [];
        Object.keys(tempAttribute).forEach(item => {
          if (item.indexOf(that.colorName) !== -1) {
            tempSizeList.push(tempAttribute[item]);
          }
        });
        that.colorSizeList = tempSizeList;

        that.showSizeList = true;

        this.$emit('showFadeInUp', false);

        //策略价
        if (that.price == that.markingPrice) {
          let favorite = { itemId: data.itemId, valueId: this.valueId };
          util.getItemPriceRules(favorite, merchantInfo).then(val => {
            if (Number(val) > Number(0)) {
              that.price = val;
            }
          });
        }
      } else {
        tip.plainText('请重试');
      }
    },

    addShoppingCart: async function() {
      let that = this;
      let cart_key = uni.getStorageSync(CART_KEY) || null;
      if (cart_key == null || cart_key == '') {
        that.initCart();
        // that.doTakeCart();
      } else {
        //加入购物车
        that.initCart();
        let cart_key = uni.getStorageSync(CART_KEY) || null;
        if (cart_key != null && cart_key != '') {
          this.doTakeCart();
        }
      }
    },

    //加入购物车
    doTakeCart: async function() {
      let that = this;
      let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
	  const accountInfo = uni.getAccountInfoSync()
      //查询一次购物车 如果报错，则重新加载cartKey

	  that.$commonFunction.getCartList().then((res) => {
	    
	  }).catch((err) => {
	    uni.setStorageSync(CART_KEY, null);
	    this.initCart();
	  });

      let jwt = uni.getStorageSync(CUSTOMER_INFO).jwt;
      const json = await api.addCart(
        {
          method: 'POST',
          header: { jwt: jwt },
          query: {
            itemCode: that.addCartItemCode,
            itemName: encodeURI(that.itemName),
            qty: 1,
            skuCode: that.addCartSkuCode,
            skuId: that.addCartSkuId
          }
        },
        that.cartKey + '/item'
      );
      if (json.code === 1000) {
        //显示加购成功信息框
        that.addCartSuccess = true;
        setTimeout(() => {
          this.addCartSuccess = false;
        }, 2000);
        that.getCartList(jwt, that.cartKey);
      } else {
        this.initCart();
        if (json.msg) {
          if (json.code === -1002) {
            let itemNum = json.msg;
            let item = itemNum.substr(3, 6);
            tip.plainText(item);
          }
          this.onGotUserInfoToRegister();
        } else {
          tip.plainText('无法加入购物车');
        }
        this.$emit('loginStatus', true);
      }
    },

    //获取购物车商品列表
    getCartList: async function(jwt, cart_key) {
      let that = this;
      // let cart_key = uni.getStorageSync(CART_KEY);
      // let jwt = uni.getStorageSync(CUSTOMER_INFO).jwt;
      try {
        if (jwt && cart_key !== null) {
			that.$commonFunction.getCartList().then((res) => {
			  if (res && res.items !== null) {
			    let cartItems = res.items;
			    let number = res.availableTotalQty || 0;

			    this.$emit('cartNumStatus', number);
			    uni.setStorageSync('cartNum', number);
			  }
			}).catch((err) => {
			  
			});
        }
      } catch (err) {
        
      }
    },

    // 创建购物车获取cart_key
    initCart: async function() {
      let that = this;
      let cart_key = uni.getStorageSync(CART_KEY) || null;
      if (cart_key == null || cart_key == '') {
        let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
        let merchantInfo = uni.getStorageSync(MERCHANT_INFO);
        let cart_key = '';
        let res = await api.checkCart({
          method: 'POST',
          header: { jwt: customerInfo.jwt },
          query: {
            customerId: customerInfo.customerId,
            merchantId: merchantInfo.cloudMerchantId,
            orderSource: 'wxapp',
            storeId: merchantInfo.cloudMerchantStoreId
          }
        });
        if (res.code === 1000) {
          cart_key = res.data;
          that.cartKey = cart_key;
          uni.setStorageSync(CART_KEY, cart_key);
          this.doTakeCart();
        } else {
          let cartRes = await api.initCart({
            method: 'POST',
            header: { jwt: customerInfo.jwt },
            query: {
              customerId: customerInfo.customerId,
              merchantId: merchantInfo.cloudMerchantId,
              orderSource: 'wxapp',
              storeId: merchantInfo.cloudMerchantStoreId
            }
          });
          cart_key = cartRes.data.cartKey;
          that.cartKey = cart_key;
          uni.setStorageSync(CART_KEY, cart_key);
          this.doTakeCart();
        }
      }
    },

    hidePicker() {
      this.showSizeList = false;
      // this.$emit('showFadeInUp', true)
    },

    /**
     * @param {Object} itemId
     * @param {Object} valueId
     * @param {Object} merchantInfo
     *  多条件查询商品收藏信息 favoritesId:-1 代表未收藏
     */
    inquireFavorites: async function(itemId, valueId) {
      let that = this;
      let jwt = uni.getStorageSync(CUSTOMER_INFO).jwt;
      //获取商户信息
      let merchantInfo = uni.getStorageSync(MERCHANT_INFO)
      if (merchantInfo && jwt) {
        const favoritesInfo = await api.inquireFavorites({
          header: {
            jwt: jwt
          },
          query: {
            item_id: itemId,
            merchant_id: merchantInfo.cloudMerchantId,
            store_id: merchantInfo.cloudMerchantStoreId,
            value_id: valueId
          }
        });
        if (favoritesInfo.code == 1000) {
          let favorites = favoritesInfo.data;
          let favoritesId = favorites.favoritesId;
          if (favoritesId == -1) {
            that.appendFavorites(that.frontCode, that.itemId, that.valueId);
          } else {
            return;
          }
        }
      }
    },

    getMyBackground: async function(merchant_id, config_scope_id) {
      let that = this;
      const json = await api.getStoreInfo({
        method: 'GET',
        query: {
          config_client_id: 'efcloud',
          config_path: 'store/information/account_background',
          config_scope: 'Store',
          config_scope_id: config_scope_id,
          merchant_id: merchant_id
        }
      });
      if (json.code === 1000) {
        uni.setStorageSync('myBackground', json.data.value);
      }
    },

    jumpPage(e) {
      let that = this;
      let itemId = e.currentTarget.dataset.itemid;
      let valueId = e.currentTarget.dataset.valueid;
      let valueName = e.currentTarget.dataset.valuename;

      uni.navigateTo({
        url: '/pages/item/item?id=' + itemId + '&valueId=' + valueId + '&valueName=' + valueName + '&purchasetype=' + that.purchasetype + '&special=' + that.special + "&hasExpose=true"
      });
    }
  }
};
</script>

<style lang="less" scoped>
image {
  height: auto;
}
// 类目切换名称
.items_grid_list {
  // padding: 0rpx 10rpx;
  font-size: 28rpx;
}
.tab_change {
  display: flex;
  justify-content: center;
  padding-bottom: 60rpx;
  font-size: 28rpx;

  view {
    color: #7f7f7f;
    font-size: 28rpx;
    margin: 0 23px 0 0;
    display: inline-block;
    border-bottom: 1px solid #7f7f7f;
  }
  .tabActive {
    color: #000 !important;
    border-bottom: 1px solid #000000;
  }
}

// 上下滑动 style

.shopitem-vertical {
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  // padding-bottom: 30rpx;
      padding: 0 28rpx 28rpx 28rpx;
    /* padding: 0 28rpx; */
    justify-content: space-between;
  .listing-banner {
    width: 100%;
  }
}

// 左右滑动
.shopitem-horizontal {
  background: #fff;
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 30rpx;
  // 单个商品宽度为100%
  .listing-banner {
    width: 100%;
    padding-right: 20rpx;
  }
}

.shopitem-horizontal .listing-banner:last-child {
  padding-right: 0rpx;
}

// 收藏
.collect,
.collectSel,
.collectDel,
.collectAdd {
  position: absolute;
  z-index: 3;
  top: 40rpx;
  right: 0rpx;
  width: 100rpx;
  height: 100rpx;
}
.elcollect-01-1 {
  color: #ffffff;
  position: absolute;
  z-index: 3;
  top: 0rpx;
  right: 0rpx;
  padding: 10rpx;
}
.elcollect-02-2 {
  position: absolute;
  z-index: 3;
  top: 0rpx;
  right: 0rpx;
  padding: 10rpx;
}

.selFav {
  color: #b52727;
}
.selHeart {
  color: #ffffff;
}
//收藏End

// 上下 && 左右滑动 宽50% start
.list,
.listing-banner {
  width: 47%;
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 4px 1.5% 30rpx 1.5%;

  .image_box {
    position: relative;

    image {
      width: 347.88rpx;
      height: 505rpx;
      opacity: 1;
    }
  }

  .cos-goods {
    padding-bottom: 20rpx;
    // 色块
    .colorBlock {
      display: flex;
      flex-wrap: wrap;

      .skuImageUrl {
        margin: 0 12rpx 0 0;
        padding: 4px 0 1rpx;
        width: 26rpx;
        height: 26rpx;

        image {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }

    // 名称和价格
    .product_name {
      font-size: 24rpx;
      font-weight: 400;
      letter-spacing: 0.0825em;
      order: 1;
      margin-top: 18rpx;
      line-height: 28rpx;
      color: #444;
    }

    // 划线价
    .markPrice {
      display: flex;
      padding-top: 6rpx;
      .linePrice {
        text-decoration: line-through;
        color: #444444;
        font-weight: 600;
        text-align: left;
        font-size: 24rpx;
      }

      .nowPrice {
        margin-left: 10rpx;
        color: #ff571a;
        font-weight: 600;
        text-align: left;
        font-size: 24rpx;
      }
    }

    .price {
      padding-top: 6rpx;
      color: #444;
      text-align: left;
    }
  }
}

// 上下滑动 宽50% end

// 上下 && 左右滑动 宽度 100%

// 左右滑动宽度 50%
.listing-banner {
  .image_box {
    position: relative;
    image {
      display: block;
      width: 100%;
      // width: 348rpx;
      // height: 348rpx !important;
      opacity: 1;
    }
  }
}

.marker-text {
  color: #bb762b;
  font-size: 24rpx;
}

// 材质标签
.tag2 {
  color: #8d9aab;
}

// 新品标签
.tagBox {
  display: flex;
  .gTag {
    font-size: 20rpx;
    padding: 3rpx 16rpx;
    z-index: 1;
    display: inline-block;
    margin: 11rpx 10rpx 0 0;
  }
}

// new标签和cos线上一致
.newTag {
  font-weight: 400;
  letter-spacing: 0.0825em;
  position: absolute;
  top: 16rpx;
  left: -8rpx;
  padding: 0 16rpx;
  color: #ffffff;
  background-color: #b89978;
  z-index: 1;
  font-size: 18rpx;
  line-height: 36rpx;
}
// 新品标签End

// 促销
.saleBox {
  display: flex;
  justify-content: left;
  line-height: 36rpx;
  flex-flow: row wrap;
  margin: 10rpx 0 -10rpx;
}

.saleBox label {
  color: #ff571a;
  font-size: 24rpx;
  margin-right: 30rpx;
}

// 收藏
.btnContainer {
  display: flex;
}
.btnContainer .iconheart-default {
  margin: 4rpx 24rpx 0 0;
  display: block;
}
.btnContainer .iconheart-activation {
  margin: 6rpx 14rpx 0 0;
  display: block;
}
.btnContainer .icon-bag-o {
  font-size: 36rpx; /*line-height: 76rpx;*/
}
.svg_favOFF,
.svg_favON {
  background-size: 36rpx 34rpx;
  width: 40rpx;
  height: 40rpx;
  margin: 7rpx 16rpx 0 0;
  padding-right: 0;
}
.icon-cos_cart {
  font-size: 34rpx;
  margin-top: 3rpx;
  display: block;
  color: #666;
  background-color: #fff;
  line-height: 42rpx;
  padding: 0;
}

/* 尺码弹框 */
.topSizeList {
  position: fixed;
  bottom: 110rpx;
  left: 0;
  z-index: 10;
  height: 610rpx;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ddd;
}
.topSizeList .bg {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  z-index: 10;
}
.topSizeList picker-view-column view {
  line-height: 100rpx;
  text-align: center;
}
.topSizeList .cascade_header {
  margin: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 30rpx;
  width: auto;
  background-color: #fff;
}
.topSizeList .sizeBox {
  position: relative;
  z-index: 12;
}
.quxiao,
.queren {
  line-height: 80rpx;
}

.quxiao {
  color: #939393;
}
.goodsTag {
  color: #ff571a !important;
  font-size: 24rpx;
  margin-right: 14rpx;
}

/* 加购弹框 */
.topBox {
  border: 1px solid #e7e7e7;
  background-color: #fff;
  padding: 60rpx;
  position: fixed;
  top: 30%;
  left: 2.9%;
  width: 77.8%;
}
.topBox .gImg {
  width: 236rpx;
  height: 354rpx;
  margin-right: 60rpx;
}
.topBox .gImg image {
  width: 100%;
  height: 100%;
}
.topBox .gInfo {
  padding-top: 20rpx;
}
.topBox .gNmae {
  margin-bottom: 10rpx;
}
.topBox .gColor {
  margin: 60rpx 0 10rpx 0;
}
.topBox .gContent {
  display: flex;
  margin-bottom: 60rpx;
}
.topBox .icon-bag-o {
  background-color: #444;
  color: #fff;
  padding: 10px 20rpx;
  text-align: center;
  font-size: 28rpx;
}
.topBox .icon-bag-o:before {
  content: '';
}
.topBox .icon-bag-o:after {
  content: '\e603';
}
.topBox .icon-cuowu1 {
  position: absolute;
  right: 16rpx;
  top: 16rpx;
  font-size: 64rpx;
  color: #999;
}

.customGoodsTag {
  font-size: 24rpx;
}
</style>
